<template>
  <div
    class="radio_box-date"
    ref="el_tabs"
    :style="{
      width: (options.length * Number(widthNum) * setRem()) / 16 + 'px',
    }"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
      <el-tab-pane
        :label="item.name"
        :name="item.value"
        v-for="(item, index) in list"
        :key="index"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="tableForm" v-show="activeName == 'custom'">
      <el-date-picker
        v-model="timer"
        @change="timerChange"
        type="datetimerange"
        ref="selectAllTimer"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import setRem from "@/utils/px2remref";
//小时：hour
//今日：today
//昨日：yesterday
//近一周：pastWeek
//近一月：pastMonth
//本年：thisYear
//自定义：custom

export default {
  name: "ComRadio",
  props: {
    value: {
      type: [String, Number],
      default: "today",
    },
    widthNum: {
      type: [Number, String],
      default: 55,
    },
    options: {
      type: Array, // radio选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
      default: function () {
        // return [
        //   'today', "yesterday", 'pastWeek', 'pastMonth', 'thisYear', 'custom'
        // ];
        return ["today", "yesterday", "pastWeek", "pastMonth"];
      },
    },
  },
  data() {
    return {
      activeName: "",
      timer: [],
    };
  },
  watch: {
    value: {
      // 对对象进行深度监听
      handler(newVal, oldVal) {
        this.activeName = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    //这个函数就是getter
    list: function () {
      let newArr = [];

      if (this.options.includes("hour")) {
        newArr.push({ name: "小时", value: "hour" });
      }
      if (this.options.includes("today")) {
        newArr.push({ name: "今日", value: "today" });
      }
      if (this.options.includes("yesterday")) {
        newArr.push({ name: "昨日", value: "yesterday" });
      }
      if (this.options.includes("pastWeek")) {
        newArr.push({ name: "近一周", value: "pastWeek" });
      }
      if (this.options.includes("pastMonth")) {
        newArr.push({ name: "近一月", value: "pastMonth" });
      }
      if (this.options.includes("thisYear")) {
        newArr.push({ name: "本年", value: "thisYear" });
      }
      if (this.options.includes("custom")) {
        newArr.push({ name: "自定义", value: "custom" });
      }

      return newArr;
    },
    width: function () {
      // console.log(this.options)
      return this.options.length * 100 + "px";
    },
  },
  mounted() {
    this.initStyle();
  },
  created() {},
  methods: {
    initStyle() {
      // this.$nextTick(() => {
      //   this.$refs.el_tabs.style.marginRight =
      //     "-" + this.options.length * 2 + "px";
      // });
    },
    setRem() {
      return setRem();
    },
    timerChange(e) {
      this.timer = e;
      this.$emit("handleClick", this.timer);
    },
    handleClick({ name }) {
      if (name == "hour") {
        this.timer = [
          this.$moment().subtract(1, "hours").format("YYYY-MM-DD HH") +
            ":00:00",
          this.$moment().subtract(0, "hours").format("YYYY-MM-DD HH") +
            ":00:00",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "today") {
        this.timer = [
          this.$moment().format("YYYY-MM-DD") + " 00:00:00",
          this.$moment().format("YYYY-MM-DD") + " 23:59:59",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "yesterday") {
        this.timer = [
          this.$moment().subtract(1, "days").format("YYYY-MM-DD") + " 00:00:00",
          this.$moment().subtract(1, "days").format("YYYY-MM-DD") + " 23:59:59",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "pastWeek") {
        // this.timer = [
        //   this.$moment()
        //     .week(this.$moment().week())
        //     .startOf("week")
        //     .format("YYYY-MM-DD") + " 00:00:00",
        //   this.$moment()
        //     .week(this.$moment().week())
        //     .endOf("week")
        //     .format("YYYY-MM-DD") + " 23:59:59",
        // ];
        this.timer = [
          this.$moment().subtract(7, "day").format("YYYY-MM-DD") + " 00:00:00",
          this.$moment().subtract(0, "day").format("YYYY-MM-DD") + " 23:59:59",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "pastMonth") {
        // this.timer = [
        //   this.$moment().startOf("month").format("YYYY-MM-DD") + " 00:00:00",
        //   this.$moment().endOf("month").format("YYYY-MM-DD") + " 23:59:59",
        // ];
        this.timer = [
          this.$moment().subtract(30, "day").format("YYYY-MM-DD") + " 00:00:00",
          this.$moment().subtract(0, "day").format("YYYY-MM-DD") + " 23:59:59",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "thisYear") {
        this.timer = [
          this.$moment().format("YYYY") + "-01-01 00:00:00",
          this.$moment().format("YYYY") + "-12-31" + " 23:59:59",
        ];
        this.$emit("handleClick", this.timer);
      } else if (name == "custom") {
        this.$nextTick(() => {
          this.$refs.selectAllTimer.focus();
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.radio_box-date {
  width: 100%;

  .tableForm {
    position: relative;
    z-index: 100;
    overflow: hidden;

    .el-date-editor {
      position: absolute;
      /*//绝对定位 */
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      /* //设置完全透明 */
    }
  }
}
</style>